<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="zh-cn">
<head>
    <meta content="云之讯,云通讯,云通讯平台" name="keywords"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>短信云平台运营系统 - 管理员中心</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link th:href="@{/resources/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/resources/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet"><!-- jqgrid-->
    <link th:href="@{/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css}" rel="stylesheet">
    <link th:href="@{/resources/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/resources/css/style.min862f.css?v=4.1.0}" rel="stylesheet">
    <link th:href="@{/resources/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <link th:href="@{/resources/css/select2.css}" rel="stylesheet">
    <style>
        /* Additional style to fix warning dialog position */
        #alertmod_table_list_2 {
            top: 900px !important;
        }
        .close{
            opacity: 1;
        }
        .modal-content{
            opacity: 1 !important;
            border:none;
        }
        .select2 span{
            display:block !important;
            margin-top: 0px !important;
        }
        .select2-container {
            width: 171px !important;
        }
        .select2-dropdown {
            width: 175px !important;
        }
        .select2-container .select2-selection--single{
            width:175px;
        }
    </style>
</head>
<body class="gray-bg"><div th:replace="stat :: statCode"></div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>客户发送记录</h5>
                </div>
                <!-- 搜索条件 -->
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <form role="form" class="form-inline" id="mainForm">
                                <div class="form-group" style="margin-left:20px">
                                    <label for="account_id"><span style="color: red;">*</span>账户名称:</label>
                                    <select name="account_id" id="account_id"  class="form-control" ></select>
                                </div>
                                <div class="form-group" style="margin-left:20px">
                                    <label for="send_status">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发送状态:</label>
                                    <select id="send_status" class="form-control" name="send_status" style="width:210px">
                                        <option value="" >全部</option>
                                        <option value="1">未知</option>
                                        <option value="0">发送中</option>
                                        <option value="3">发送成功</option>
                                        <option value="5,7,8,9,10">拦截</option>
                                        <option value="4,6">发送失败</option>
                                    </select>
                                </div>
                                <div class="form-group" style="margin-left:20px">
                                    <label for="phone" >手机号码：</label>
                                    <input type="text" id="phone" name="phone" class="form-control" style="width:140px">
                                </div>

                                <div class="form-group" style="margin-left:20px">

                                    <label for="send_content" >发送内容：</label>
                                    <input type="text"  id="send_content" name="send_content" class="form-control" style="width:300px">
                                </div>
                                <!-- 时间选择 -->

                                <div class="form-group sandbox-container" style="margin-left:20px">

                                    <div class="form-group pull-right"><span style="font-weight:700">&nbsp;&nbsp;发送时间:</span>
                                        <input placeholder="起始时间" class="form-control layer-date" id="start_time_day" name="start_time_day" />&nbsp;&nbsp;至
                                        <input placeholder="截止时间" class="form-control layer-date" id="end_time_day" name="end_time_day"/>
                                    </div>
                                </div>
                                <div class="form-group" style="float: right;margin-bottom: 1.5%">
                                    <span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-danger " onclick="search()">搜索</button></span>
                                    <!--<span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-primary" onclick="exportExcel()">导出Excel</button></span>-->
                                </div>
                            </form>
                        </div>

                    </div>
                </div>

                <div class="ibox-content">
                    <div class="jqGrid_wrapper">
                        <table id="table_list"></table>
                        <div id="pager_list"></div>
                    </div>
                    <p>&nbsp;</p>
                </div>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/resources/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/resources/js/bootstrap.min.js?v=3.3.6}"></script>
<script th:src="@{/resources/js/content.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/layer/laydate/laydate.js}"></script>
<script th:src="@{/resources/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/i18n/grid.locale-cn.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/resources/js/date_format.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/resources/js/common.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/auth.js}"></script>
<script th:src="@{/resources/js/layer/layer.js}"></script>
<script th:src="@{/resources/js/select2.min.js}"></script>



<script th:inline="javascript">
    /*<![CDATA[*/
    var start = {
        elem: "#start_time_day",
        format: "YYYY-MM-DD hh:mm:ss",
        max: laydate.now(),
        istime: true,
        istoday: true,
        choose: function (datas) {
            end.min = datas;
        }
    };

    var end = {
        elem: "#end_time_day",
        format: "YYYY-MM-DD hh:mm:ss",
        min: "#start_time_day",
        max: laydate.now(),
        start:/*[[${end_time}]]*/'',
        istime: true,
        istoday: true,
        choose: function (datas) {
            start.max = datas;
        }
    };
    laydate(start);
    laydate(end);
    //    $("#start_time_day").val(laydate.now("YYYY-MM-dd hh:mm:ss"));
    //    $("#end_time_day").val(laydate.now("YYYY-MM-dd hh:mm:ss"));
    $("#start_time_day").val((new Date()).Format("yyyy-MM-dd") + " 00:00:00");
    $("#end_time_day").val((new Date()).Format("yyyy-MM-dd hh:mm:ss"));
    //    $("#end_time_day").val(laydate.now("YYYY-MM-dd hh:mm:ss"));

    //Date对象：date1 date2
    function isTheSameDay(date1,date2){
        if(date1 == date2){
            return true;
        }else{
            return false;
        }
    }
    function search(){
        var date_start = $("#start_time_day").val();
        var date_end = $("#end_time_day").val();
        var d_start = date_start.split(' ')[0];
        var d_end = date_end.split(' ')[0];
        var flag = isTheSameDay(d_start,d_end);
        if(flag == false){
            layer.alert('请输入同一天的日期', {icon: 2});
            return;
        }
        $("#table_list").jqGrid('setGridParam',{
            datatype:'json',
            postData: {
                send_status:$("#send_status").val(),
                phone:$("#phone").val(),
                send_content:$("#send_content").val(),
                account_id:$("#account_id").val(),
                condition: $("#condition").val(),
                start_time_day: $("#start_time_day").val(),
                end_time_day: $("#end_time_day").val(),
                minAmount: $("#minAmount").val(),
                maxAmount: $("#maxAmount").val(),
                agent_type: $("#agent_type").val()
            }, //发送数据
            page:1
        }).trigger("reloadGrid"); //重新载入
    }
    function reload() {
        event.preventDefault();
        $("#table_list").jqGrid('setGridParam',{
            datatype:'json',
            postData: {
                condition: $("#condition").val(),
                agentType:$("#agentType").val(),
                create_time:$("#create_time").val()
            }, //发送数据
        }).trigger("reloadGrid"); //重新载入
    }
    $(document).ready(function () {
        $.jgrid.defaults.styleUI = "Bootstrap";
        $(window).bind("resize", function () {
            var width = $(".jqGrid_wrapper").width();
            $("#table_list").setGridWidth(width);
        })
        function keyUp(e) {
            var currKey=0,e=e||event;
            currKey=e.keyCode||e.which||e.charCode;
            var keyName = String.fromCharCode(currKey);
            if (currKey == 13){
                search();
            }
        }
        document.onkeyup = keyUp;


        //获取用户账号
        var select2Date;
        $.ajax({
            url : '/customersendrecord/customersendrecordAccounts',
            dataType : 'json',
            async : false,
            success : function(res){
                for(var i = 0; i < res.length; i++){
                    res[i].id = res[i].clientid;
                    res[i].text = res[i].clientid+ "-" + res[i].name ;
                }
                // res.unshift({id:"",text:""})
                select2Date = res;
                loadTable();
                //加载表格

            }
        })
        //初始化select2
        $("#account_id").select2({
            data : select2Date
        })

    });
    function loadTable(){
        $("#table_list").jqGrid({
            url:/*[[@{/customersendrecord/customersendrecordQuery}]]*/'',
            mtype: 'POST',
            datatype: "json",
            jsonReader : {
                root:"list",
                page: "currentPage",
                total: "totalPage",
                records: "totalCount"
            },
            height: 'auto',
            rownumbers:true,
            autowidth: true,
            shrinkToFit: true,
            autoScroll: true,
            rowNum: 20,
            rowList: [10, 20, 30,50],
            colNames: ["手机号", "发送内容", "发送状态","状态码", "发送时间", "计费条数"],
            colModel: [
                /*  {name: "rownum",align: "left",sortable:false}, */
                {name: "phone",align: "left",sortable:false},
                {name: "content",align: "left",sortable:false,width:400},
                {name: "status", align: "left",sortable:false,width:60},
                {name: "errorcode_name", align: "left",sortable:false,width:100},
                {name: "sendTime", align: "left",sortable:false},
                {name: "charge_num", align: "left",sortable:false,width:50}
            ],
            pager: "#pager_list",
            viewrecords: true,
            hidegrid: false
        });

    }

    var max_export_num = /*[[${max_export_num}]]*/;
    //导出Excel文件
    function exportExcel() {
        var totalCount = $("#table_list").jqGrid('getGridParam','records');
        if (totalCount == 0) {
            layer.msg("共0条记录，将不导出Excel文件", {icon: 2});
            return;
        }
        if(totalCount > max_export_num){
            layer.msg("导出Excel文件条数大于"+max_export_num+"条", {icon: 2});
            return;
        }
        var mainForm = $("#mainForm");
        var action = mainForm.attr("action");
        var exporUrl = /*[[@{/customersendrecord/exportRecord}]]*/;
        mainForm.attr("action", exporUrl).submit();
        mainForm.attr("action", action);
    }


    /*]]>*/
</script>
</body>
</html>